/**
 * 题库详情
 */
<template>
    <el-form v-loading="loading" :model="formData" :rules="currentFormRules" ref="formRef" label-width="120px" :scroll-to-error="true">
        <vp-card>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="题库编号" en="No." /></template>
                        <el-input v-model="formData.bh" v-if="isEditPage" v-trim maxlength="50">
                        </el-input>
                        <span v-else>{{ formData.bh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="mc">
                        <template #label><vp-label zh="题库名称" en="Description" /></template>
                        <el-input v-model="formData.mc" v-if="isEditPage" v-trim maxlength="100">
                        </el-input>
                        <span v-else>{{ formData.mc }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="备注" en="Remark"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.bz" 
                            maxlength="1000" 
                            :autosize="{ minRows: 4}"
                            v-if="isEditPage"
                        >
                        </el-input>
                        <span v-else>{{ formData.bz }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>

    </el-form>
</template>
<script setup lang="ts" name="questionBank">
import { ref, computed } from 'vue';
import validateUtils from '/@/utils/validateUtils';

const emits = defineEmits(['formSubmited']);
const props = defineProps({
    // 页面类型
	type: {
		type: String,
		default: 'add',
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false,
	},
});
const formData = ref({
    id:"",
    zt:20,
    bh:"",
    mc:"",
    bz:"",
});
const formRules = {
    bh:[ validateUtils.notNull, validateUtils.notChinese ],
    mc:[ validateUtils.notNull ],
}

// 页面验证规则
const currentFormRules = computed(() => {
    if (isEditPage.value) {
        return formRules;
    }
    return {};
})

const formRef = ref();

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});

// 清空数据
const initFormData = ()=>{
    formData.value = {
        id:"",
        zt:20,
        bh:"",
        mc:"",
        bz:"",
    }
}

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
    };
}

/**
 * 获取数据
 */
const getData = (): Promise<any>=>{
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            const data = {
                ...formData.value,
            };
            if (valid) {
                resolve(data);
            } else {
                reject();
            }
        })
    })
}

defineExpose({
    setData,
    getData,
})

</script>
<style scoped lang="scss">
</style>